<template>
  <div style="width: 100%" class="choose-list">
    <!-- <el-form-item :label="labelName"  >
      &nbsp;
    </el-form-item> -->
    <div
      style="margin-left: 40px"
      :style="{
        color: checkListColor,
        fontSize: checkListSize + 'px',
      }"
      :class="isTitleCenter ? 'text-center' : 'text-left'"
    >
      {{ labelName }}
    </div>
    <template v-if="currentDataList && currentDataList.length > 0">
      <ul v-if="mode === 'edit'">
        <li
          v-for="(item, index) in currentDataList"
          :key="index"
          :class="[
            isAlignCenter ? 'text-center' : 'text-left',
            chooseListFlag == index ? 'choose-list-selected' : '',
          ]"
          @click="chooseList($event, index, item.value)"
        >
          <span>{{ item.label }}</span>
        </li>
      </ul>
      <!-- <div v-else>{{ ['文化程度变更、更正','婚姻状况变更、更正','兵役状态变更、更正','服务处所、职业变更、更正'][value-1] }}</div> -->
      <div v-else>{{ typeName }}</div>
    </template>
    <ul v-else>
      <li>暂无数据</li>
    </ul>
  </div>
</template>
<script>
import { findComponentUpward } from "@/utils/util";
import datasource from "../../mixins/steps-datasource";
export default {
  name: "pm-checklist",
  mixins: [datasource],
  props: {
    // value: {},
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    currentDataList: {
      type: Array,
      default() {
        return [];
      },
    },
    isAlignCenter: {
      type: Boolean,
      default: false,
    },
    isTitleCenter: {
      type: Boolean,
      default: false,
    },
    labelName: {
      type: String,
      default: "选择业务类型",
    },
    checkListColor: {
      default: "",
    },
    checkListSize: {
      default: "",
    },
  },
  data() {
    return {
      chooseListFlag: -1,
      currentDataList: [],
    };
  },
  watch: {
    options: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val && val.length) {
          this.currentDataList = val.map((item) => {
            return {
              value: item.value,
              label: item.label,
            };
          });
        }
      },
    },
  },
  computed: {
    typeName() {
      let result = this.currentDataList.filter(
        (item) => (item.id = this.value)
      );
      return result.name;
    },
    chooseListFlag: {
      get() {
        if (this.value || this.value == 0) {
          const index =
            this.options &&
            this.options.findIndex((item) => item.value == this.value);
          if (index > -1) {
            return index + 1 + "";
          } else {
            return this.value;
          }
        } else {
          return null;
        }
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  mounted() {
    console.log(findComponentUpward(this), "===");
    console.log(this.typeName, "typeName");
  },
  methods: {
    chooseList(e, index, value) {
      this.chooseListFlag = index;
      this.$emit("input", value);
      console.log(value);
    },
  },
};
</script>
<style scoped>
.label-name {
  margin-right: 20px;
  font-size: 14px;
  /* color: #999; */
  /* color: #1890ff; */
}
li {
  margin: 15px auto;
  padding: 5px 10px;
  line-height: 15px;
  list-style: none;
  text-align: left;
  border: 1px solid #c0c0c0;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.choose-list {
  /* padding: 16px; */
}
.choose-list ul li.choose-list-selected {
  border: 1px solid #1890ff !important;
}
</style>
